<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="../../common/taglibs.jsp" %>
<%@ include file="../../common/head.builive.inc.jsp" %>
<%@ include file="../../common/session.script.inc.jsp" %>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/pages/main/css/nav.style.css">
    <style>
        .nav * {
            text-decoration: none;
            font-size: 9pt;
        }

        .nav li a:hover {
            background-color: #BAACF9; /* 鼠标经过时的红色背景，可自定义 */
        }

        .menu {
            float: right;
            margin-top: -60px;
            list-style: none;
            height: 60px;
            width: 130px;
            background-color: #333;
        }

        .nav {
            list-style: none;
            height: 60px;
            width: 128px;
            margin: 0 auto;
            background-color: #333;
        }

        .nav li {
            float: left;
            border-left: 1px solid #4a4a4a;
            border-right: 1px solid #242424;
            border-top: 1px solid #4a4a4a;
            border-bottom: 1px solid #242424;
            position: relative;
        }

        .nav li a {
            color: #fff;
            height: 58px;
            line-height: 58px;
            font-weight: bold;
            padding: 0 20px;
            blr: expression(this.onFocus=this.close());
            blr: expression(this.onFocus=this.blur());
            display: inline-block;
        }

        .nav li a:focus {
            -moz-outline-style: none;
        }

        .nav li .sub-nav {
            position: absolute;
            top: 59px;
            left: -1px;
            list-style: none;
            background-color: #333;
            display: none;
        }

        .nav li .sub-nav li {
            text-align: center;
            clear: left;
            width: 112px;
            height: 35px;
            line-height: 35px;
            position: relative;
        }

        .nav li .sub-nav li a {
            height: 34px;
            line-height: 34px;
            width: 110px;
            padding: 0;
            display: inline-block;
        }

        .user-action span:hover {
            font-size: 12.5px;
            color: #ffff00;
        }

        .footer {
            width: 100%;
            min-width: 1170px;
            margin-top: 15px;
            background-color: #262c40;
            padding: 40px 0 30px;
            color: gray;
        }
        .footer-container{
            width: 1170px;
            overflow: hidden;
            padding: 0;
        }
        .footer-container .info {
            float: left;
            width:50%;
            font-size: 16px;
        }
        .footer-container .info p {
            margin-left: 50px;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $(".nav>li").hover(function () {
                $(this).children('ul').stop(true, true).show(300);
            }, function () {
                $(this).children('ul').stop(true, true).hide(300);
            })

        })
    </script>
</head>

<body>
<div class="main-content">
    <div class="box">
        <ul class="f-nav" id='f-nav'>
            <li action="pages/home/home.jsp" id="navTab0">首页</li>
            <li action="/pages/contract/contractMgr.jsp" style="display: none" id="navTab1">合约管理</li>
            <li action="/pages/account/account.jsp" style="display: none" id="navTab2">账户充值</li>
            <li action="/pages/user/userCenter.jsp" style="display: none" id="navTab3">用户中心</li>
            <div class='sideline'></div>
        </ul>
        <!--DEMO start-->
        <div class="menu">
            <ul class="nav">
                <li class="user-action">
                    <a href="#"><span class="user-login">登录</span>&nbsp;&nbsp;/&nbsp;&nbsp;
                        <span class="user-register">注册</span></a>
                </li>
                <li class="user-info" style="display: none"><a href="#"><span class="user-name"></span></a>
                    <ul class="sub-nav">
                        <li><a href="#" class="editUserInfo">用户信息</a></li>
                        <li><a href="#" class="editpass">修改密码</a></li>
                        <li><a href="#" class="loginout">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--DEMO end-->
    </div>
    <iframe id="iframe-page-content" src="${ctx}/pages/home/home.jsp" width="100%" height="400px"
            frameborder="no" border="0" marginwidth="0" marginheight=" 0" allowtransparency="yes"></iframe>
    <div class="footer">
        <div class="footer-container">
            <div class="info">
                <p>客服咨询热线：18559208986</p>
            </div>
            <div class="info">
                <p>客服咨询微信：18559208986</p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="${ctx}/public/jQuery/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/public/jQuery/js/jquery-nav.js"></script>
<script type="text/javascript" src="${ctx}/pages/main/js/index.js"></script>
</body>
</html>